import PropTypes from 'prop-types'
import React, { memo, useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts';

import { ChartBatteryWarpper } from './style'
import { calcZoomAndScale } from "@/utils"


const ChartBattery = memo((props) => {
    const { count = 0, height = "40px" } = props
    const elRef = useRef()
    const [zoom, setZoom] = useState()
    const [scale, setScale] = useState()
    useEffect(() => {
        let myChart = echarts.init(elRef.current);
        function chartResize() {
            const { _zoom, _scale } = calcZoomAndScale()
            setScale(_scale)
            setZoom(_zoom)
        }
        function initChart() {
            const option = {
                xAxis: {
                    max: 100,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                grid: {
                    left: 0,
                    top: 0, // 设置条形图的边距
                    right: 80,
                    bottom: 0
                },
                yAxis: [{
                    type: "category",
                    inverse: false,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                }],
                series: [{
                    type: "bar",
                    barWidth: 18,
                    legendHoverLink: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#07639B" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#70BEFF" // 100% 处的颜色
                                    }
                                    ]
                                }
                            },
                        }
                    },
                    data: [count],
                    z: 1,
                    animationEasing: "elasticOut"
                },
                {
                    // 分隔
                    type: "pictorialBar",
                    itemStyle: {
                        normal: {
                            color: "#061348"
                        }
                    },
                    symbolRepeat: "fixed",
                    symbolMargin: 6,
                    symbol: "rect",
                    symbolClip: true,
                    symbolSize: [1, 21],
                    symbolPosition: "start",
                    symbolOffset: [1, -1],
                    symbolBoundingData: 100,
                    data: [100],
                    z: 2,
                    animationEasing: "elasticOut"
                },
                {
                    // 外边框
                    type: "pictorialBar",
                    symbol: "rect",
                    symbolBoundingData: 100,
                    itemStyle: {
                        normal: {
                            color: "none"
                        }
                    },
                    label: {
                        normal: {
                            formatter: (params) => {
                                return params.data + '%';
                            },
                            position: 'right',
                            distance: 16, // 向右偏移位置
                            fontSize: 18,
                            color: '#fff',
                            show: true
                        }
                    },
                    data: [count],
                },
                {
                    name: "外框",
                    type: "bar",
                    barGap: "-120%", // 设置外框粗细
                    data: [100],
                    barWidth: 25,
                    itemStyle: {
                        normal: {
                            color: "transparent", // 填充色
                            barBorderColor: "#1C4B8E", // 边框色
                            barBorderWidth: 1, // 边框宽度
                            // barBorderRadius: 0, //圆角半径
                            label: {
                                // 标签显示位置
                                show: false,
                                position: "top" // insideTop 或者横向的 insideLeft
                            }
                        }
                    },
                    z: 0
                }
                ]
            };
            option && myChart.setOption(option);
            chartResize()
        }
        initChart()
        window.addEventListener("resize", chartResize)
        return () => {
            window.removeEventListener("resize", chartResize)
        }
    }, [])

    return (
        <ChartBatteryWarpper height={height}>
            <div ref={elRef} className='container' style={{ zoom: zoom, transform: "scale(" + scale + ")", transformOrigin: '0 0' }}></div>
        </ChartBatteryWarpper>
    )
})

ChartBattery.propTypes = {
    count: PropTypes.number,
    height: PropTypes.string
}

export default ChartBattery